<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>NippleJS</title>
        <meta
            name="viewport"
            content="width=device-width, initial-scale=0.5, maximum-scale=0.5"
        />
        <style>
            html,
            body {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                padding: 0;
                margin: 0;
            }

            #left {
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 50%;
                background: rgba(0, 255, 0, 0.1);
            }

            #right {
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                width: 50%;
                background: rgba(0, 0, 255, 0.1);
            }
        </style>
    </head>
    <body>
        <div id="left"></div>
        <div id="right"></div>
        <script src="/dist/nipplejs.js"></script>
        <script>
            var joystickL = nipplejs.create({
                zone: document.getElementById("left"),
                mode: "static",
                position: { left: "30%", top: "50%" },
                color: "green",
                size: 200,
                restJoystick: { y: false }
            });

            var joystickR = nipplejs.create({
                zone: document.getElementById("right"),
                mode: "static",
                position: { left: "70%", top: "50%" },
                color: "red",
                size: 200,
                restJoystick: false
            });
        </script>
    </body>
</html>
